.nom-input-focus(@color: @input-border-focus) {
  @color-rgba: rgba(red(@color), green(@color), blue(@color), 0.6);

  &:focus {
    border-color: @color;
    outline: 0;
  }
}

.nom-input {
  display: block;
  width: 100%;
  height: @input-height-base; // Make inputs at least the height of their button counterpart (base line-height + padding + border)
  padding: @padding-y-base @padding-x-base;
  color: var(--nom-input-color);
  font-size: @font-size-base;
  line-height: @line-height-computed;
  background-color: var(--nom-input-bg);
  background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214
  border: 1px solid var(--nom-color-border);
  border-radius: var(--nom-border-radius); // Note: This has no effect on <select>s in some browsers, due to the limited stylability of <select>s in CSS.
  outline: none;
  // Customize the `:focus` state to imitate native WebKit styles.
  transition: all .3s;
  .nom-input-focus();

  &:hover {
    border-color: var(--nom-color-primary);
  }

  // Unstyle the caret on `<select>`s in IE10+.
  &::-ms-expand {
    background-color: transparent;
    border: 0;
  }

  &::placeholder {
    color: var(--nom-color-text-2);
  }

  // Disabled and read-only inputs
  //
  // HTML5 says that controls under a fieldset > legend:first-child won't be
  // disabled if the fieldset is disabled. Due to implementation difficulty, we
  // don't honor that edge case; we style them as disabled anyway.
  &[disabled],
  &[readonly],
  fieldset[disabled] & {
    background-color: var(--nom-input-bg-disabled);
    opacity: 1; // iOS fix for unreadable disabled content; see https://github.com/twbs/bootstrap/issues/11655
  }

  &[disabled],
  fieldset[disabled] & {
    border-color: var(--nom-color-border);
    cursor: @cursor-disabled;
  }

  // Reset height for `textarea`s
  textarea & {
    height: auto;
  }

  .s-invalid>& {
    .nom-preset-invalid;
  }

}

.nom-textbox {
  >.nom-field-content {
    .nom-control {
      position: relative;
      background-color: var(--nom-input-bg);
      border-radius: var(--nom-border-radius);
    }
  }

  &.s-invalid.p-plain {
    >.nom-field-content {
      >.nom-control>.nom-input {
        border-color: var(--nom-color-danger);
      }
    }
  }

  &.s-invalid {
    .nom-textbox-affix-wrapper {
      .nom-preset-invalid;
    }
  }

  &.p-with-button {
    >.nom-field-content {
      >.nom-control {
        display: flex;

        >.nom-input {
          border-top-right-radius: 0;
          border-bottom-right-radius: 0;
        }

        >.nom-textbox-button {
          border-left: transparent;
          border-top-left-radius: 0;
          border-bottom-left-radius: 0;
        }
      }
    }
  }

  .nom-textbox-affix-wrapper {
    display: flex;
    flex: 1;
    align-items: center;
    padding: 0 @padding-x-base;
    border: 1px solid var(--nom-color-border);
    border-radius: var(--nom-border-radius);
    transition: all .3s;

    &:focus-within {
      border-color: var(--nom-color-primary);
    }

    &:hover {
      border-color: var(--nom-color-primary);
    }

    .nom-input-affix {
      display: flex;
      flex: none;
      align-items: center;
      color: var(--nom-control-icon-color);
    }

    .nom-input-prefix,
    .nom-textbox-left-icon {
      margin-right: 4px;
    }

    .nom-input-suffix,
    .nom-textbox-right-icon,
    .nom-input-count {
      margin-left: 4px;
      color: var(--nom-control-icon-color);
    }

    .nom-input {
      height: @input-height-base-inner; // while input as inner El, height = base line-height + padding (ignore border)
      padding: 0;
      background: transparent;
      border: none;
      outline: none;
    }
  }

  &.s-disabled,
  &[readonly] {
    .nom-textbox-affix-wrapper {
      background: var(--nom-input-bg-disabled);
      border-color: var(--nom-color-border);
    }
  }

  .nom-textbox-left-icon,
  .nom-textbox-right-icon {
    color: var(--nom-control-icon-color);
  }
}

.nom-time-picker,
.nom-date-picker,
.nom-partial-date-picker {
  &[readonly] {
    .nom-textbox-affix-wrapper {
      background: transparent;
      border-color: var(--nom-color-border);
    }
  }

  &.s-disabled {
    .nom-textbox-affix-wrapper {
      background: var(--nom-input-bg-disabled);
      border-color: var(--nom-color-border);
    }
  }

  .nom-input[readonly]:not([disabled]) {
    background-color: transparent;
  }
}
